$menu-icon: $text-dark-color-secondary;
$menu-text: $text-dark-color-secondary;

$menu-icon-light: $text-color;
$menu-text-light: $text-color;

$menu-icon-hover: $text-dark-color;
$menu-text-hover: $white;
$menu-bg-hover: $text-color;
$menu-icon-light-hover: $primary-color;
$menu-text-light-hover: $primary-color;
$menu-bg-light-hover: transparent;

$menu-icon-active: $white;
$menu-text-active: $white;
$menu-bg-active: $primary-color;
$menu-icon-light-active: $primary-color;
$menu-text-light-active: $primary-color;
$menu-bg-light-active: $primary-bg-color;




.learun-el-menu,
.learun-more-dark-el-menu,
.learun-more-light-el-menu {
  .el-menu {
    border-right: none;
    background-color: $color-type-black;
  }

  .el-menu__item-wraper {
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
  }

  .el-menu__icon {
    width: 24px;
    display: block;
    text-align: center;
    transition: all .1s;
    color: $menu-icon;
    margin: 0;
  }

  .el-menu__text {
    color: $menu-text;
    display: block;
  }

  .el-menu-item,
  .el-submenu__title {
    position: relative;
    line-height: 48px;
    height: 48px;
    padding: 0 20px;
    transition: all .3s;
    border: 0;

    &:before {
      transition: all .3s;
      top: 4px;
      bottom: 4px;
      left: 8px;
      right: 8px;
      position: absolute;
      border-radius: 2px;
    }

    &:hover {
      background-color: transparent;

      .el-menu__icon,
      .el-submenu__icon-arrow {
        color: $menu-icon-hover;
      }

      .el-menu__text {
        color: $menu-text-hover;
      }

      &:before {
        content: '';
        background: $menu-bg-hover;
      }
    }


    &.is-active {
      background-color: transparent;

      .el-menu__icon,
      .el-submenu__icon-arrow {
        color: $menu-icon-active;
      }

      .el-menu__text {
        color: $menu-text-active;
      }

      &:before {
        content: '';
        background: $menu-bg-hover;
      }
    }
  }
}


.learun-el-menu {
  &.el-menu {
    border-right: none;
    background-color: $color-type-black;
  }

  &.el-menu--horizontal {
    border: 0;
  }

  .el-submenu .el-menu-item {
    min-width: 0;
  }

  .el-menu__text {
    margin-left: 8px;
  }

  .el-menu__icon+.el-menu__text {
    margin-left: 4px;
  }

  &-collapse {
    .el-submenu__icon-arrow {
      display: none;
    }

    .el-menu-item.is-active:before {
      display: none;
    }

    &>.el-menu-item.is-active:before {
      display: block;
    }

    .el-menu__text {
      display: none;
    }

    .el-menu__icon+.el-menu__text {
      margin-left: 0;
    }

    &.el-menu>.el-submenu {
      &.is-opened>.el-submenu__title {
        background-color: transparent;

        .el-menu__icon {
          color: $menu-icon-hover;
        }

        .el-menu__text {
          color: $menu-text-hover;
        }

        &:before {
          content: '';
          background: $menu-bg-hover;
        }
      }

      &.is-active>.el-submenu__title {
        background-color: transparent;

        .el-menu__icon {
          color: $menu-icon-active;
        }

        .el-menu__text {
          color: $menu-text-active;
        }

        &:before {
          content: '';
          background: $menu-bg-active;
        }
      }
    }
  }

  /*横向菜单*/
  &.el-menu--horizontal {

    &.el-menu,
    .el-submenu {
      height: $header-height;
    }

    .el-submenu__icon-arrow {
      display: none;
    }

    /*.el-menu__item-wraper {
        position: relative;
      }*/
    .el-menu-item:not(.is-disabled):focus,
    .el-menu-item:not(.is-disabled):hover {
      background-color: transparent;
    }

    &>.el-menu-item.is-active {
      border-bottom: 0;
    }

    .el-menu-item,
    .el-submenu__title {
      height: 100%;
      padding: 4px 16px;
      border-bottom: 0 !important;

      &:hover {
        background-color: transparent;
      }

      &:before {
        top: 8px;
        bottom: 8px;
        left: 30px;
        right: 4px;
      }
    }


    &.el-menu>.el-submenu {
      &.is-opened>.el-submenu__title {
        background-color: transparent;

        .el-menu__icon {
          color: $menu-icon-hover;
        }

        .el-menu__text {
          color: $menu-text-hover;
        }

        &:before {
          content: '';
          background: $menu-bg-hover;
        }
      }

      &.is-active>.el-submenu__title {
        background-color: transparent;

        .el-menu__icon {
          color: $menu-icon-active;
        }

        .el-menu__text {
          color: $menu-text-active;
        }

        &:before {
          content: '';
          background: $menu-bg-active;
        }
      }
    }
  }
}




.learun-el-menu-light {

  &.el-menu,
  .el-menu {
    background-color: $white;
  }

  .el-menu__text {
    color: $menu-text-light;
  }

  .el-menu__icon {
    color: $menu-icon-light;
  }

  .el-menu-item,
  .el-submenu__title {
    &:hover {
      .el-menu__text {
        color: $menu-text-light-hover;
      }

      .el-menu__icon {
        color: $menu-icon-light-hover;
      }

      &:before {
        background: $menu-bg-light-hover
      }
    }

    &.is-active {
      .el-menu__icon {
        color: $menu-icon-light-active;
      }

      .el-menu__text {
        color: $menu-text-light-active;
      }

      &:before {
        background: $menu-bg-light-active;
      }
    }
  }

  &.learun-el-menu-collapse,
  &.el-menu--horizontal {
    &.el-menu>.el-submenu {
      &.is-opened>.el-submenu__title {
        .el-menu__icon {
          color: $menu-icon-light-hover;
        }

        .el-menu__text {
          color: $menu-text-light-hover;
        }

        &:before {
          content: '';
          background: $menu-bg-light-hover;
        }
      }

      &.is-active>.el-submenu__title {
        background-color: transparent;

        .el-menu__icon {
          color: $menu-icon-light-active;
        }

        .el-menu__text {
          color: $menu-text-light-active;
        }

        &:before {
          content: '';
          background: $menu-bg-light-active;
        }
      }
    }
  }
}


.learun-more-dark-el-menu,
.learun-more-light-el-menu {
  .el-menu--popup-right-start {
    margin-left: 4px;
    margin-right: 4px;
  }

  .el-menu--popup {
    margin-top: -6px;
    padding: 6px 0;
  }
}

.learun-more-dark-el-menu {
  .el-submenu {
    &.is-opened>.el-submenu__title {
      background-color: transparent;

      .el-menu__icon {
        color: $menu-icon-hover;
      }

      .el-menu__text {
        color: $menu-text-hover;
      }

      &:before {
        content: '';
        top: 2px;
        bottom: 2px;
        left: 8px;
        right: 8px;
        background: $menu-bg-hover;
        position: absolute;
        border-radius: 2px;
      }
    }

    &.is-active>.el-submenu__title {

      .el-menu__icon,
      .el-submenu__icon-arrow {
        color: $menu-icon-active;
      }

      .el-menu__text {
        color: $menu-text-active;
      }

      &:before {
        content: '';
        background: $menu-bg-active;
      }
    }
  }
}

.learun-more-light-el-menu {
  .el-menu {
    background-color: $white;
  }

  .el-menu__icon {
    color: $menu-icon-light;
  }

  .el-menu__text {
    color: $menu-text-light;
  }

  .el-menu-item,
  .el-submenu__title {
    padding: 0 20px !important;

    &:hover {
      .el-menu__icon {
        color: $menu-icon-light-hover
      }

      .el-menu__text {
        color: $menu-text-light-hover
      }

      &:before {
        background: $menu-bg-light-hover;
      }
    }

    &.is-active {
      .el-menu__icon {
        color: $menu-icon-light-active;
      }

      .el-menu__text {
        color: $menu-text-light-active;
      }

      &:before {
        background: $menu-bg-light-active;
      }
    }
  }

  .el-submenu {
    &.is-opened>.el-submenu__title {
      background-color: transparent;

      .el-menu__icon,
      .el-submenu__icon-arrow {
        color: $menu-icon-light-hover;
      }

      .el-menu__text {
        color: $menu-text-light-hover;
      }

      &:before {
        content: '';
        top: 2px;
        bottom: 2px;
        left: 8px;
        right: 8px;
        background: $menu-bg-light-hover;
        position: absolute;
        border-radius: 2px;
      }
    }

    &.is-active>.el-submenu__title {

      .el-menu__icon,
      .el-submenu__icon-arrow {
        color: $menu-icon-light-active;
      }

      .el-menu__text {
        color: $menu-text-light-active;
      }

      &:before {
        content: '';
        background: $menu-bg-light-active;
      }
    }
  }

}

.learun-more-light-top-el-menu {
  .el-menu--popup {
    margin-top: 0;
  }

  .el-menu--popup-right-start {
    padding: 6px 0;
    margin-top: -6px;
  }
}